<template>
  <div class="app">
    <!-- 顶部横幅 -->
    <header class="relative h-[70vh] bg-cover bg-center flex items-center justify-center" style="background-image: url('https://picsum.photos/id/152/1920/1080');">
      <div class="absolute inset-0 bg-gradient-to-b from-black/60 to-black/30"></div>
      <div class="container mx-auto px-6 relative z-10 text-center text-white">
        <h1 >粤西荔枝文化</h1>
        <p >
          千年岭南佳果，品味粤西荔枝的独特魅力
        </p>
      </div>
    </header>

    <!-- 文化简介 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-6">
        <div class="max-w-3xl mx-auto text-center mb-12">
          <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">文化底蕴</h2>
          <p class="text-gray-600">
            粤西荔枝种植历史可追溯至唐代，作为朝廷贡品闻名遐迩，苏轼曾留下"日啖荔枝三百颗"的千古名句。
          </p>
        </div>

       
          <div>
            <div class="grid md:grid-cols-2 gap-12 items-center">
           <div class="video-container">
    <iframe 
      src="//player.bilibili.com/player.html?bvid=BV1At4y1H7bz"
      scrolling="no"
      border="0"
      frameborder="no"
      framespacing="0"
      allowfullscreen="true"
      class="bilibili-video"
    ></iframe>
  </div>
          </div>
          <div>
            <p class="text-gray-700 mb-4">
              独特的地理环境和气候条件，造就了粤西荔枝果大核小、肉厚汁多、清甜爽口的优良品质。
            </p>
            <p class="text-gray-700 mb-4">
              荔枝文化在粤西地区根深蒂固，融入了当地人的生活习俗、节庆活动和民间传说中。
            </p>
            <p class="text-gray-700">
              每年荔枝成熟季节，粤西各地都会举办盛大的荔枝文化节，吸引众多游客前来品尝和体验。
            </p>
          </div>
        </div>
      </div>
    </section>

   <!-- 品种展示 -->
<section class="py-16 bg-gray-50">
  <div class="container mx-auto px-6">
    <div class="max-w-3xl mx-auto text-center mb-12">
      <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">主要品种</h2>
      <p class="text-gray-600">
        粤西荔枝品种丰富，各具特色，满足不同消费者的口味需求。
      </p>
    </div>

    <div class="grid md:grid-cols-3 gap-8">
      <!-- 糯米糍 -->
      <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
        <div class="image-container">
          <img 
            src="@\assets\a6ef-iatixpm2962278.jpg" 
            alt="糯米糍荔枝" 
            class="absolute inset-0 w-full h-full object-cover"
          >
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 mb-2">糯米糍</h3>
          <p class="text-gray-600 mb-4">
            果大核小，肉质嫩滑，味极清甜，香气浓郁。
          </p>
          <div class="flex items-center text-sm text-gray-500">
            <i class="fas fa-calendar-alt mr-2"></i>
            <span>成熟期：6月下旬至7月上旬</span>
          </div>
        </div>
      </div>

      <!-- 桂味 -->
      <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
        <div class="image-container">
          <img 
            src="@\assets\4-1P605201957.jpg" 
            alt="桂味荔枝" 
            class="absolute inset-0 w-full h-full object-cover"
          >
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 mb-2">桂味</h3>
          <p class="text-gray-6 mb-4">
            清甜多汁，带有桂花香味，品质极佳。
          </p>
          <div class="flex items-center text-sm text-gray-500">
            <i class="fas fa-calendar-alt mr-2"></i>
            <span>成熟期：6月下旬至7月上旬</span>
          </div>
        </div>
      </div>

      <!-- 白糖罂 -->
      <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
        <div class="image-container">
          <img 
            src="@\assets\R-C.jpg" 
            alt="白糖罂荔枝" 
            class="absolute inset-0 w-full h-full object-cover"
          >
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 mb-2">白糖罂</h3>
          <p class="text-gray-600 mb-4">
            果肉爽脆，清甜带蜜味，早熟优质品种。
          </p>
          <div class="flex items-center text-sm text-gray-5">
            <i class="fas fa-calendar-alt mr-2"></i>
            <span>成熟期：5月下旬至6月中旬</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    <!-- 图片展示 -->
   <!-- 图片展示 -->
    <section class="py-16 bg-gray-900 text-white">
      <div class="container mx-auto px-6">
        <div class="max-w-3xl mx-auto text-center mb-12">
          <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">荔枝风采</h2>
          <p class="text-gray-300">
            感受粤西荔枝的独特魅力和丰收喜悦
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/295/400/300" alt="荔枝果园" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              连片荔枝林，果实挂满枝头，绿意与红果交织
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/296/400/300" alt="荔枝采摘" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              果农穿梭林间，精心采摘成熟荔枝
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/297/400/300" alt="荔枝美食" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              以荔枝为食材，打造的特色美味佳肴
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/298/400/300" alt="荔枝文化节" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              荔枝文化节现场，热闹非凡，游人如织
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/299/400/300" alt="荔枝加工" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              荔枝加工车间，将鲜果制成罐头、果干等产品
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/300/400/300" alt="古荔枝树" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              百年古荔枝树，见证岁月变迁与荔枝文化传承
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/301/400/300" alt="荔枝冷链运输" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              现代化冷链运输，确保荔枝新鲜送达各地
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://picsum.photos/id/302/400/300" alt="荔枝文创产品" class="w-full h-48 object-cover transition-transform duration-300 transform hover:scale-105">
            <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm">
              丰富多样的荔枝主题文创产品，传递文化内涵
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
      <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-6 md:mb-0">
            <div class="flex items-center">
              <svg class="w-8 h-8 text-orange-400 mr-2" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
              </svg>
              <span class="text-lg font-bold">粤西荔枝文化</span>
            </div>
          </div>
          
          <div class="text-center md:text-right">
            <p class="text-gray-300 mb-2">粤西荔枝文化推广中心</p>
            <p class="text-gray-400 text-sm mb-4">信管1222柯泽翔</p>
            <p class="text-gray-400 text-sm">咨询电话：6666666</p>
          </div>
        </div>
        
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
          <p>© 2025 粤西荔枝文化推广中心 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import {useUserInfoStore} from '@/stores/userInfo.js'
import {useRouter} from 'vue-router'
import {getUserInfoService} from '@/api/login/login.js'
import {useUserPermissionStore} from '@/stores/userPermission.js'

const router = useRouter()

onMounted(async () => { 
  const userInfoStore = useUserPermissionStore()
  const result = await getUserInfoService()
  console.log(result.data)
  userInfoStore.setUserInfo(result.data)
  
})

</script>

<style scoped>

.image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 50/33; /* 设定你期望的容器比例 */
  overflow: hidden;
  margin-bottom: 1rem;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: #f5f5f5; /* 添加背景色避免空白处突兀 */
}

.image-container img {
  width: 60%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 关键改变：保持原比例，不裁剪 */
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
  margin: 20px 0;
}

.bilibili-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

h1, h2, h3 {
  font-weight: 700;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.grid {
  display: grid;
  gap: 1rem;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-orange-50 {
  background-color: #fff7ed;
}

.bg-gray-800 {
  background-color: #1f2937;
}

.bg-gray-900 {
  background-color: #111827;
}

.text-orange-400 {
  color: #fb923c;
}

.text-orange-500 {
  color: #f97316;
}

.text-orange-600 {
  color: #ea580c;
}

.text-gray-300 {
  color: #d1d5db;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-700 {
  color: #374151;
}

.text-white {
  color: #fff;
}

.rounded-xl {
  border-radius: 12px;
}

.rounded-lg {
  border-radius: 8px;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.object-cover {
  object-fit: cover;
}

.animate-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (min-width: 768px) {
  .md:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .md:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .md:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .md:flex-row {
    flex-direction: row;
  }
  
  .md:items-center {
    align-items: center;
  }
  
  .md:justify-between {
    justify-content: space-between;
  }
  
  .md:text-right {
    text-align: right;
  }
  
  .md:mb-0 {
    margin-bottom: 0;
  }
}
</style>